<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实时监测</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <!--全局css-->
    <link rel="stylesheet" href="../../../style.css">
    <style>

        .page {
            font-family: "微软雅黑", Arial;
        }

        .paramSpan {
            font-size: 18px;
            cursor: pointer;
            border: 1px solid #d73530;
            color: #fcfe1e;
        }

        .slider {
            width: 35px;
            height: 35px;
            cursor: pointer;
            position: absolute;
        }

        .riskpoint {
            width: 42px;
            height: 42px;
            cursor: pointer;
            position: absolute;
        }

        .img {
            width: 35px;
            height: 35px;
        }

        .devSpan {
            top: 40px;
            position: relative;
            white-space: nowrap;
        }

        .chart-outer {
            height: 200px;
        }

        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }

        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }

        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        .chart-outer {
            height: 300px;
        }

        .deviceInfo {
            height: 300px;
        }

        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }

        li {
            list-style-type: none;
        }

        .paramDiv {
            width: 100%;
            background: #fff;
            height: auto;
        }

        .note {
            padding-top: 38px;
            margin-bottom: 10px;
            background: url(../../../imgs/bg-note-top.png) top center no-repeat;
        }

        .note-container {
            text-indent: 2em;
            background: url(../../../imgs/bg-note-middle.png) top center repeat-y;
            overflow: hidden;
        }

        .note-bottom {
            padding-bottom: 34px;
            background: url(../../../imgs/bg-note-bottom.png) bottom center no-repeat;
        }
    </style>

</head>
<body>

<div class="page" id="page-vue" :style="{height:height+'px'}">

    <el-container>
        <el-aside v-bind:style="{width:width+'px'}">
            <h2 style="text-align: center">场景列表</h2>
            <el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#ecf8ff"
                     :default-active="sceneIndex">
                <el-menu-item v-for="(item, index) in sceneList" :index="index">
                    <i class="el-icon-document"></i>
                    <span slot="title">                    <template v-if="item">{{item.SceneName}}</template></span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <el-tooltip effect="dark" content="点击缩放" v-model="tooltip" placement="right">
                <el-button class="icon iconfont icon-full" circle @click="changeFull"></el-button>
            </el-tooltip>
            <div id="box" style="margin: auto">
            </div>
        </el-main>
    </el-container>

    <el-dialog title="实时数据" :visible.sync="devVisible" width="70%" style="margin-top:10px;height: 80%"
               @close='closeDialog' :close-on-click-modal="false">

        <el-row>
            <el-col :span="10">
                <div class="deviceInfo">
                    <template v-if="device">
                        <ul class="attr">
                            <li>设备名称:　　{{device.DeviceName}}</li>
                            <li>设备编号:　　{{device.DeviceID}}</li>
                            <li>所属区域:　　{{device.zoneName}}</li>
                            <li>所属部门:　　{{device.DepartmentName}}</li>
                            <li>设备状态:　　<span v-if="device.online==1">在线</span><span
                                    v-else-if="device.online==0">离线</span>
                            </li>
                            <li>最近时间:　　{{device.updateTime}}</li>
                        </ul>
                    </template>
                </div>

            </el-col>
            <el-col :span="14">
                <div class="chart-outer" id="realChart">

                </div>
            </el-col>
        </el-row>
        <div class="paramDiv">
            <el-row style="flex-wrap: nowrap">
                <el-col :span="3" v-for="(item,index) in  paramData">
                    <div class="panel panel-f" @click="loadDeviceParam(index)">
                        <p>{{item.dp_name}}</p>
                        <h5>{{item.dp_value}}{{item.dp_unitid}}</h5>
                    </div>
                </el-col>
            </el-row>
        </div>


    </el-dialog>

    <el-dialog title="报警派单" :visible.sync="editAlarmVisible" width="600">
        <el-card>
            <el-form :inline="true" label-width="100px">
                <el-form-item label="接收人(*)">
                    <el-select v-model="dptchForm.toUserId">
                        <el-option v-for="item in childUsers" :value="item.Id" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="报警详情(*)">
                        <el-input type="textarea" style="width:350px;" v-model="dptchForm.alarmMsg"></el-input>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" size="mini" round style="margin-left: 100px;" @click="onSaveDptch">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-dialog>

    <el-dialog
            title="风险任务详情"
            :visible.sync="riskVisible"
            width="60%"
    >
        <h1 align="center">查看详情</h1>
        <template v-if="riskDetail">
            <table border="1" cellpadding="10" cellspacing="0" style="width: 100%">
                <tr>
                    <td style="font-weight: bold">风险点名称</td>
                    <td>{{riskDetail.riskName}}</td>
                    <td style="font-weight: bold">总巡检任务</td>
                    <td>{{riskDetail.total}}</td>
                    <td style="font-weight: bold">巡检完成</td>
                    <td>{{riskDetail.finished}}</td>
                </tr>
                <tr>
                    <td style="font-weight: bold">发现隐患数</td>
                    <td>{{riskDetail.found}}</td>
                    <td style="font-weight: bold">已整改数</td>
                    <td>{{riskDetail.processed}}</td>
                    <td style="font-weight: bold">超期未整改数</td>
                    <td>{{riskDetail.unprocessed_timeout}}</td>
                </tr>
            </table>
        </template>
        <el-table :data="tableData" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column prop="patrolName" label="风险点名称" align="center"></el-table-column>
            <el-table-column prop="userName" label="巡检人" align="center"></el-table-column>
            <el-table-column prop="missionTime" label="巡检时间" align="center"></el-table-column>
            <el-table-column prop="alarmSituation" label="巡检情况" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.alarmSituation==0">
                        <el-tag type="success">未发生隐患</el-tag>
                    </div>
                    <div v-if="scope.row.alarmSituation==1">
                        <el-tag type="danger">存在隐患</el-tag>
                    </div>
                    <div v-if="scope.row.processflag==0">
                        <el-tag type="warning">暂未巡检</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="missionDetail" label="备注说明" align="center">

            </el-table-column>

        </el-table>
        <div class="">
            <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                           :current-page.sync="pageno" @current-change="onChangePage">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="riskVisible=false">取消</el-button>
                    <el-button type="primary" @click="riskVisible=false"
                               style="text-align: center">确定</el-button>
            </span>
    </el-dialog>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    let vuePageIndex = new Vue({
        el: '#page-vue',
        data: {
            proNo: '',
            sceneList: [],
            img: {
                'Electric': '../../../imgs/electric.png',
                'Water': '../../../imgs/water.png'
            },
            devVisible: false,
            device: '',
            paramData: '',
            index: 0,
            time1: '',
            width: 240,
            items: [],
            tooltip: false,
            editAlarmVisible: false,
            childUsers: [],
            dptchForm: {
                alarmId: '',
                alarmName: '',
                alarmMsg: '',
                toUserId: ''
            },
            activeId: 0,
            timer: null,
            sceneIndex: 0,
            height: 0,
            riskVisible: false,
            tableData: [],
            riskDetail: {},
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            riskId: '',
        },
        methods: {
            changeFull() {
                this.width = this.width == 240 ? 0 : 240;
            },
            onChangePage(page) {
                this.pageno = page;
                this.riskReal();
            },
            handleSelect(key) {
                this.sceneIndex = key
                this.setBoxImg(key);
                $('#box').empty();
                HttpUtil.get('ScadaDevice/List', {
                    SceneID: this.sceneList[key].SceneID,
                    pointType: -1
                }).success((res) => {
                    for (let item of res.data) {

                        let color = ['green', 'grey', 'red'];
                        if (item.pointType == 0) {
                            $('#box').append('<div  id= ' + item.DeviceID + ' class="riskpoint" title=' + item.DeviceName + '><span class="devSpan">' + item.DeviceName + '</span></div>');
                            let style = {
                                left: item.Left1 + 'px',
                                top: item.Top + 'px',
                                background: "url(../../../imgs/marker-alarm" + item.devStatus + ".png)",
                                color: color[item.devStatus],
                            }
                            for (let k in style) {
                                document.getElementById(item.DeviceID).style[k] = style[k];
                            }
                            $('#' + item.DeviceID).on("click", () => {
                                this.riskId = item.DeviceID;
                                this.riskReal();
                            });
                        } else if (item.pointType == 1) {
                            $('#box').append('<div  id= ' + item.DeviceID + ' class="slider" title=' + item.DeviceName + '><span class="devSpan">' + item.DeviceName + '</span></div>');
                            let style = {
                                left: item.Left1 + 'px',
                                top: item.Top + 'px',
                                background: "url(" + this.img[item.deviceType] + ")",
                                color: color[item.devStatus - 1],
                            }
                            for (let k in style) {
                                document.getElementById(item.DeviceID).style[k] = style[k];
                            }
                            $('#' + item.DeviceID).on("click", () => {
                                this.devReal(item.DeviceID);
                            });
                        }

                    }
                })
                HttpUtil.get('ScadaTag/List', {SceneID: this.sceneList[key].SceneID}).success((res) => {
                    for (let item of res.data) {
                        $('#box').append('<div  id= ' + item.DeviceID + '-' + item.field + ' class="paramSpan">' + item.field + '-' + item.value + '</div>');
                        let style = {
                            left: item.Left1 + 'px',
                            top: item.Top + 'px',
                            color: 'blue',
                            position: "absolute",
                        }
                        for (let k in style) {
                            document.getElementById(item.DeviceID + '-' + item.field).style[k] = style[k];
                        }
                    }
                });
            },
            devReal(id) {
                this.devVisible = true;
                this.getDeviceData({deviceId: id});
                clearInterval(this.time1);
                clearInterval(this.timer);
                this.time1 = setInterval(() => {
                    this.getDeviceData({deviceId: id});
                }, 30000)
            },
            riskReal() {
                this.riskVisible = true;
                HttpUtil.get('Patrolexcute/getRiskStatus', {
                    projectNo: SiteConfig.account.projectNo,
                    pointType: 0,
                    deviceId: this.riskId,
                    pageno: this.pageno,
                    pagesize: this.pagesize
                }).success((res) => {
                    this.tableData = res.data;
                    this.totalCount = res.total
                })
                HttpUtil.get('Patrolexcute/getRiskPercent', {riskNo: this.riskId}).success((res) => {
                    this.riskDetail = res.data[0];
                })
            },

            closeDialog() {
                clearInterval(this.time1);
                this.startTimer();
                this.devVisible = false;
            },
            loadDeviceParam(index) {
                this.index = index;
                this.getChart('realChart', this.paramData[index]);
            },
            getChart: function (id, data) {
                let myChart = echarts.init(document.getElementById(id));
                var option = {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: data.dp_name,
                            type: 'gauge',
                            min: 0,
                            max: data.dp_value * 1.4,
                            splitNumber: 8,
                            detail: {formatter: data.dp_value + data.dp_unitid},
                            data: [{value: data.dp_value, name: data.dp_name}],
                            radius: "100%", //仪表大小
                        }
                    ]
                };
                myChart.setOption(option);
            },
            getDeviceData(params) {
                HttpUtil.get('device/getById', params).success((res) => {
                    this.device = res.data
                    HttpUtil.get('device/Monitor', params).success((res) => {
                        this.paramData = res.data
                        this.getChart('realChart', this.paramData[this.index]);
                    })
                })
            },
            setBoxImg(index) {
                $("#box").css("background-image", "url('')");
                // 根据索引 设置 不同场景的 不同背景图
                if (this.sceneList[index].ImageName != null) {
                    let img = new Image();
                    img.src = 'http://iot.hzcando.com:10004' + this.sceneList[index].ImageName;
                    if (img.complete) {
                        let style = {
                            position: "relative",
                            width: img.width + "px",
                            height: img.height + "px",
                            top: "10px",
                            left: "10px",
                        }
                        for (let key in style) {
                            document.getElementById('box').style[key] = style[key];
                        }
                        $("#box").css("background-image", "url(" + img.src + ")");
                    } else {
                        img.onload = function () {
                            let style = {
                                position: "relative",
                                width: img.width + "px",
                                height: img.height + "px",
                                top: "10px",
                                left: "10px",
                            }
                            for (let key in style) {
                                document.getElementById('box').style[key] = style[key];
                            }
                            $("#box").css("background-image", "url(" + img.src + ")");
                            img.onload = null;//避免重复加载
                        }
                    }
                }
            },
            loadDatas: function () {
                var _self = this;
                HttpUtil.get('Error/List', {
                    ProcessFlag: 0,
                }).success((data) => {
                    var datas = data.data;
                    for (var i = 0; i < datas.length; i++) {
                        datas[i].LogTime = datas[i].LogTime.replace("T", " ");
                    }
                    _self.items = datas;
                });
            },
            dispatch: function (row) {
                this.dptchForm.alarmId = row.Id;
                this.dptchForm.alarmName = row.ErrorName;
                this.dptchForm.alarmMsg = row.ErrorName;
                this.editAlarmVisible = true;
            },
            onSaveDptch: function () {
                var _self = this;
                var param = {
                    wf_operation: "手工开单",
                    wf_businesstype: 5,
                    wf_eventName: this.dptchForm.alarmName,
                    wf_eventMsg: this.dptchForm.alarmMsg,
                    wf_objType: 5,
                    wf_objid: this.dptchForm.alarmId,
                    wf_to: this.dptchForm.toUserId,  //接收人Id
                    wf_seqno: 0
                };
                HttpUtil.get('WorkFlow/Add', param).success(function (data) {
                    if (data.state == 0) {
                        _self.$message({
                            message: '派单成功！',
                            type: 'success'
                        });

                        for (var i = 0; i < _self.items.length; i++) {
                            if (_self.items[i].Id == _self.dptchForm.alarmId) {
                                _self.items[i].ProcessFlag = 1;
                                _self.items[i].ProcessFlag_Text = '已派单';
                                break;
                            }
                        }

                        _self.editAlarmVisible = false;
                        _self.startTimer();

                    } else {
                        _self.$message({
                            message: '派单失败！',
                            type: 'error'
                        });
                    }
                });
            },
            handleDetail: function (item) {
                HttpUtil.get('ScadaScene/ByDeviceIDList', {DeviceID: item.DeviceNo}).success((res) => {
                    this.searchScenId(res.data[0].SceneID);
                })
            },
            searchScenId(Id) {
                for (let i = 0; i < this.sceneList.length; i++) {
                    if (Id == this.sceneList[i].SceneID) {
                        this.sceneIndex = i;
                        this.handleSelect(this.sceneIndex);

                        return;
                    }
                }
            },
            startTimer() {
                this.timer = setInterval(() => {
                    this.loadDatas();
                    this.handleSelect(this.sceneIndex);
                }, 30000)
            },
            zoomElement(elmnt) {
                if (elmnt.addEventListener) {
                    // IE9, Chrome, Safari, Opera
                    elmnt.addEventListener('mousewheel', MouseWheelHandler, false);
                    // Firefox
                    elmnt.addEventListener('DOMMouseScroll', MouseWheelHandler, false);
                }

                let i = 1;
                function MouseWheelHandler(e) {
                    // cross-browser wheel delta
                    const event = window.event || e; // old IE support
                    event.preventDefault();
                    const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
                    if (delta === 1) {
                        i += 0.2;
                        elmnt.style.transform = 'scale(' + i + ')';
                    } else if (delta === -1) {
                        if (i < 0.3) {
                            i = 0.2;
                        } else {
                            i -= 0.2;
                        }
                        elmnt.style.transform = 'scale(' + i + ')';
                    }
                    return false;
                }
            }
        },
        created: function () {
            this.proNo = SiteConfig.account.projectNo;
            HttpUtil.get('User/Child').success((data) => {
                this.childUsers = data.data;
            });
            HttpUtil.get('ScadaScene/List', {projectNo: this.proNo}).success((res) => {
                this.sceneList = res.data;
                this.loadDatas();
                this.handleSelect(this.sceneIndex);
            })
            this.startTimer();
            this.height = window.innerHeight;
        },
        mounted: function () {
            this.tooltip = true;
            this.zoomElement(document.getElementById('box'))
        }
    });


</script>

</body>
</html>
